import React from "react";
import "./TodoFooter.css";

export default function TodoFooter(props) {
  let { todo, check, remove } = props;
  let checkall = (e) => {
    check(e.target.checked);
  };

  let removeall = () => {
    remove();
  };
  return (
    <div>
      <div className="todo-footer">
        <label>
          <input
            type="checkbox"
            checked={todo.every((item) => item.done) && todo.length > 0}
            onChange={checkall}
          />
        </label>
        <span>
          <span>已完成{todo.filter((item) => item.done === true).length}</span>/
          全部{todo.length}
        </span>
        <button className="btn btn-danger" onClick={removeall}>
          清除已完成任务
        </button>
      </div>
    </div>
  );
}
